<template>
  <view>
    <!-- #ifdef H5 -->
    <!-- header -->
    <view class="myheader">
      <view class="wid xin-flex flex-alc flex-btn header-box">
        <image
          @click="xin.goUrl('/')"
          src="@/static/login/heaeder-logo.jpg"
          mode="aspectFill"
        />
        <view class="right-icon xin-flex">
          <view class="shop iconfont iconicon_mall"  @click="xin.goUrl('/pages/cart/cart')"></view>
          <view
            class="user iconfont iconicon_me"
            @click="xin.goUrl('/pages/user/user')"
          ></view>
          <view
            class="bar iconfont iconicon_meum"
            @click="showNav(true)"
          ></view>
        </view>
      </view>
    </view>
    <template v-show="navFlag">
      <view class="nav-main" :style="'z-index:' + navIndex">
        <view
          class="mask animated fadeIn"
          v-show="navFlag"
          @touchmove.stop.prevent="moveHandle"
          @click="showNav(false)"
        ></view>
        <view class="nav-box" :class="navFlag ? 'show-nav' : 'none-nav'" @click="showNav(false)">
          <scroll-view scroll-y class="nav-view">
            <view class="main" @touchmove.stop.prevent="moveHandle">
              <view class="userInfo flex-alc"  @click="loginBtn()">
                <image
                  :src="userInfo.avatar ? userInfo.avatar : require('@/static/main/images/user-avter.png')"
                  mode="aspectFill"
                  @click="loginBtn"
                />
                <view class="view-text" v-if="loginFlag">
                  <view class="name tow mb-10">{{ userInfo.username || userInfo.realname || "无名" }}</view>
                  <view class="desc tow">什么都没写？</view>
                </view>
                <view class="view-text" v-else>
                  <view class="name tow mb-10" >点击登录</view>
                  <view class="desc tow">暂无信息</view>
                </view>
                <view class="right iconfont iconicon_arrow"></view>
              </view>
              <view class="flex-btn num-box m-30 pb-40">
                <view class="item">
                  <text>{{userInfo.points_number || 0}}</text>
                  <text>积分</text>
                </view>
                <view class="item">
                  <text>{{userInfo.gift || 0}}</text>
                  <text>礼包</text>
                </view>
                <view class="item">
                  <text>{{userInfo.coupon || 0}}</text>
                  <text>优惠券</text>
                </view>
                <view class="item">
                  <text>{{userInfo.collects || 0}}</text>
                  <text>收藏夹</text>
                </view>
              </view>
              <view class="tab-item flex-btn">
                <view class="label">我的消息</view>
                <view class="iconfont iconicon_arrow"></view>
              </view>
              <view class="tab-item flex-btn" @click="xin.goUrl('/pages/gift/gift-list')">
                <view class="label">礼包商城</view>
                <view class="iconfont iconicon_arrow"></view>
              </view>
              <view class="pro-box flex-alc flex-btn">
                <template  v-for="(item,index) in catleList">
                  <view class="pro-list" :key="index" @click="xin.goUrl(`/pages/shop/shop-list?cate_id=${item.id}`)">
                    <image
                      :src="item.images_mobile"
                      mode="aspectFill"
                      :alt="item.title"
                    />
                    <view class="tit">{{item.title}}</view>
                  </view>
                </template>
              </view>
              <view class="tab-item flex-btn">
                <view class="label">联系我们</view>
                <view class="iconfont iconicon_arrow"></view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </template>
    <!-- #endif -->
    <u-top-tips ref="uTips" :z-index="10"></u-top-tips>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    title: {
      type: String,
      default: "申蓝湃",
    },
  },
  data() {
    return {
      noteWork: true,
      navFlag: false,
      navIndex: -1,
      dataList:[]
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo || new Object(),
      loginFlag: "loginFlag",
      catleList:(state) =>  state.catleList || [],
    }),
  },
  watch: {
    noteWork(val) {
      // if (!val) {
      //   this.$refs.uTips.show({
      //     title: '网络错误,请检查网络后重试',
      //     type: 'error',
      //     duration: '50000'
      //   })
      // }
    },
  },
  beforeUpdate(){
	},
  mounted() {
    this.getNetwork();
  },
  methods: {
    loginBtn(){
    //    判断是跳转登录个人中心
      if(!this.userInfo.avatar){
      //  未登录
        this.xin.goUrl('/pages/login/login')
      }else{
        this.xin.goUrl('/pages/user/user')
      }

    },
    getNetwork() {
      uni.onNetworkStatusChange((res) => {
        this.noteWork = res.isConnected;
        if (res.networkType == "2g" || res.networkType == "3g") {
          this.$refs.uTips.show({
            title: "您的网络似乎不太好",
            type: "warning",
            duration: "1500",
          });
        }
      });
      uni.getNetworkType({
        success: (res) => {
          res.networkType == "none"
            ? (this.noteWork = false)
            : (this.noteWork = true);
          if (res.networkType == "2g" || res.networkType == "3g") {
            this.$refs.uTips.show({
              title: "您的网络似乎不太好",
              type: "info",
              duration: "1500",
            });
          }
        },
      });
    },
    moveHandle() {},
    showNav() {
      this.navFlag = !this.navFlag;
      if (this.navFlag) {
        this.navIndex = 100;
      } else {
        setTimeout(() => {
          this.navIndex = -1;
        }, 300);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
body,
html {
  overflow-x: hidden;
}
.mask {
  background: rgba(#000, $alpha: 0.5);
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
}
.none-nav {
  left: 100vw !important;
}
.show-nav {
  left: calc(100vw - 580rpx);
}
.nav-view {
  height: 100vh;
}
.nav-main {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  transition: 0.3s;
}
.nav-box {
  position: absolute;
  left: calc(100% - 580rpx);
  top: 0;
  background: #ffffff;
  height: 100%;
  width: 580rpx;
  z-index: 11;
  padding: 40rpx;
  transition: all ease-in-out 0.3s;
  .main {
    .userInfo {
      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
      .iconfont {
        font-size: 30rpx;
      }
      .view-text {
        margin-left: 20rpx;
        .name {
          @include fontSet(30rpx, #303133);
        }
        .desc {
          @include fontSet(24rpx, #787b80);
        }
      }
      .right {
        margin-left: auto;
      }
    }
    .num-box {
      border-bottom: 1rpx solid #d8d8d8;
      .item {
        text-align: center;
        text {
          display: block;
          @include fontSet(22rpx, #787b80);
          &:nth-child(1) {
            @include fontSet(36rpx, #303133, bold);
          }
        }
      }
    }
    .tab-item {
      line-height: 70rpx;
      .iconfont {
        font-size: 24rpx;
      }
    }
    .pro-box {
      flex-wrap: wrap;
      .pro-list {
        width: 230rpx;
        &:nth-child(2) {
          margin-left: auto;
        }
        image {
          width: 230rpx;
          height: 160rpx;
          object-fit: cover;
        }
        .tit {
          @include fontSet(28rpx, #303133);
          text-align: center;
          margin: 10rpx 0;
        }
      }
    }
  }
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background: #ffffff;
}
.header-body {
  background: #ffffff;
  .title {
    text-align: center;
    max-width: 30%;
  }
}
.myheader {
  height: 110rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: sticky;
  background: #ffffff;
  top: 0;
  z-index: 101;
  .header-box {
    image {
      width: 136rpx;
      height: 60rpx;
      cursor: pointer;
    }
    .right-icon {
      .iconfont {
        padding: 0 15rpx;
        font-size: 40rpx;
        line-height: 110rpx;
        display: block;
      }
      .bar {
        font-size: 45rpx;
      }
    }
  }
}
</style>
